---
title: 一款超精致的 React 图片预览组件
---

import { Callout } from 'nextra/components';
import { Bleed } from 'nextra-theme-docs';
import Features from '../components/features';

import Index from '../components/doc-index';
import qrcode from '../images/qrcode.jpg';

<h1 className="text-center font-bold md:text-5xl mt-8">react-photo-view</h1>

<Bleed>
  <Features />
</Bleed>

`react-photo-view` 拥有无与伦比的预览交互体验：从打开图像开始，每一帧的动画、细节和交互都经过了精心设计与反复调试，媲美原生图片预览的效果。

<div className="mt-16 mb-20 text-center">
  [示例](/docs/getting-started) · [API](/docs/api) · [GitHub 仓库](https://github.com/MinJieLiu/react-photo-view.git)
</div>

<Index />

## 概览

```jsx
import { PhotoProvider, PhotoView } from 'react-photo-view';
import 'react-photo-view/dist/react-photo-view.css';

export default function App() {
  return (
    <PhotoProvider>
      <PhotoView src="/1.jpg">
        <img src="/1-thumbnail.jpg" alt="" />
      </PhotoView>
    </PhotoProvider>
  );
}
```

该示例中，`react-photo-view` 提供了两个组件： `PhotoProvider` 和 `PhotoView`。以 `PhotoProvider`为界限，里面所有的 `PhotoView` 图片会按照运行顺序提取为一组图片预览画廊。当某个 `<img />` 被点击，则会定位到指定的图片并打开预览。

## 特性

它拥有非常完善的细节与特性：

- 支持触摸手势，**拖动/平移/物理效果滑动，双指指定位置放大/缩小**
- 全方面动画衔接，**打开/关闭/回弹/触边**，顺其自然的交互效果
- 图像自适应，以一个合适的最初呈现大小，并根据调整自适应
- 支持自定义如 `<video />` 或任意 `HTML` 元素的预览
- 键盘导航，完美适配桌面端
- 支持自定义节点扩展，轻松实现**全屏预览、旋转控制、图片介绍**以及更多功能
- 基于 `typescript`，`7KB Gzipped`，支持服务端渲染
- 简单易用的 `API`，上手零成本

## 关于

<p className="flex flex-wrap mt-6">
  <img alt="stars" src="https://badgen.net/github/stars/MinJieLiu/react-photo-view" className="mr-2 mb-2" />
  <img alt="version" src="https://img.shields.io/npm/v/react-photo-view.svg?style=flat-square" className="mr-2 mb-2" />
  <img
    alt="downloads"
    src="http://img.shields.io/npm/dm/react-photo-view.svg?style=flat-square"
    className="mr-2 mb-2"
  />
  <img alt="license" src="https://badgen.net/npm/license/react-photo-view" className="mr-2 mb-2" />
  <img alt="min" src="https://badgen.net/bundlephobia/min/react-photo-view?label=minified" className="mr-2 mb-2" />
  <img alt="gzip" src="https://badgen.net/bundlephobia/minzip/react-photo-view?label=gzip" className="mr-2 mb-2" />
</p>

`react-photo-view` 由 [MinJieLiu](https://github.com/MinJieLiu) 创建

<Callout emoji="😄">
  <span>点个 Star 不迷路 👉 </span>
  <a className="inline-block underline" href="https://github.com/MinJieLiu/react-photo-view" target="_blank">
    去 Star
  </a>
  <span> 感谢支持！</span>
</Callout>

- [稀土掘金](https://juejin.cn/user/289926798650509)
- [知乎](https://www.zhihu.com/people/liumingyi)
- [GitHub](https://github.com/MinJieLiu)
- [Gitee](https://gitee.com/MinJieLiu)

加我好友，拉你进前端交流进阶大群（备注：加群）

<img alt="code" src={qrcode.src} className="block w-36" />

## License

Apache-2.0 © [MinJieLiu](https://github.com/MinJieLiu)
